<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="shortcut icon" type="image/x-icon" href="./static/im-video/1.svg" rel="external nofollow" />

		<!-- 
		视口设置：使用name="viewport"来控制页面在不同设备上的布局，常见的设置包括：
				width=device-width：将页面宽度设置为设备的屏幕宽度。
				initial-scale=1.0：设置页面的初始缩放级别为1.0。 
		兼容性模式：针对IE浏览器，可以使用http-equiv属性来设置兼容性模式，
				例如<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">，这告诉浏览器以最高版本的IE模式渲染页面。
		 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<!-- 
		 1、initial-scale=1：设置页面加载时的初始缩放比例为1，即不进行缩放。
		 2、maximum-scale=1：设置页面允许的最大缩放比例为1，即不允许放大。
		 3、minimum-scale=1：设置页面允许的最小缩放比例为1，即不允许缩小。
		 4、user-scalable=no：禁止用户对页面进行缩放操作。
		 -->
		<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->

		<!-- 不要缓存页面内容，每次访问都需要重新从服务器获取。 -->
		<meta http-equiv="cache-control" content="no-cache,no-store,must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<!-- 设置页面的过期时间为0，即立即过期，浏览器会认为页面已经过期，需要重新从服务器获取。 -->
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
			})

			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
				CSS.supports('top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<title></title>
		<!--preload-links-->
		<!--app-context-->
	</head>
	<body>
		<div id="app"><!--app-html--></div>
		<script type="module" src="/main.js"></script>
	</body>
</html>